<template>
    <div>
        <!-- 统计信息 -->
        <div class="grid grid-cols-1 md:grid-cols-3 gap-6 mb-8">
            <div v-for="stat in stats" :key="stat.name" class="card">
                <div class="flex items-center">
                    <div class="p-3 rounded-full bg-blue-100 text-blue-500">
                        <component :is="stat.icon" class="h-6 w-6" />
                    </div>
                    <div class="ml-4">
                        <p class="text-sm font-medium text-gray-500">{{ stat.name }}</p>
                        <p class="text-lg font-semibold text-gray-900">{{ stat.value }}</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 最近的漏洞 -->
        <div class="card">
            <h2 class="text-lg font-medium text-gray-900 mb-4">最近的漏洞</h2>
            <div class="overflow-x-auto">
                <table class="table">
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>包名</th>
                            <th>严重程度</th>
                            <th>发布日期</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="vuln in recentVulnerabilities" :key="vuln.id">
                            <td>{{ vuln.id }}</td>
                            <td>{{ vuln.package }}</td>
                            <td>
                                <span class="badge" :class="getSeverityClass(vuln.severity)">
                                    {{ vuln.severity }}
                                </span>
                            </td>
                            <td>{{ formatDate(vuln.published) }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { BugAntIcon, ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/outline'
import { API_BASE_URL, API_ENDPOINTS, getApiUrl } from '../config'

const stats = ref([
    { name: '总漏洞数', value: 0, icon: BugAntIcon },
    { name: '高危漏洞', value: 0, icon: ExclamationTriangleIcon },
    { name: '已审核', value: 0, icon: CheckCircleIcon }
])

const recentVulnerabilities = ref([])

const getSeverityClass = (severity) => {
    switch (severity?.toLowerCase()) {
        case 'high':
            return 'badge-high'
        case 'medium':
            return 'badge-medium'
        case 'low':
            return 'badge-low'
        default:
            return 'badge-medium'
    }
}

const formatDate = (date) => {
    if (!date) return ''
    return new Date(date).toLocaleDateString()
}

const fetchData = async () => {
    try {
        const response = await fetch(getApiUrl(API_ENDPOINTS.HOME))
        const data = await response.json()
        
        // 更新统计数据
        stats.value[0].value = data.stats['总漏洞数']
        stats.value[1].value = data.stats['高危漏洞']
        stats.value[2].value = data.stats['已审核']
        
        // 更新最近的漏洞
        recentVulnerabilities.value = data.recent_vulnerabilities
    } catch (error) {
        console.error('Error fetching data:', error)
    }
}

onMounted(fetchData)
</script> 